iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
自我挑戰組

JavaScript DOM 操作系列 第 13

DAY 13: 事件傳遞與捕獲

  • 分享至 

  • xImage
  •  

第 13 天的挑戰,我探索了 JavaScript 的事件傳遞機制,尤其是捕獲(capture)與冒泡(bubble)。在事件發生時,瀏覽器會先從父節點向下傳遞事件到目標節點(捕獲),接著再從目標節點向上傳遞回去(冒泡)。在這過程中,我學會了如何透過 event.stopPropagation() 來控制事件傳遞的順序,以及 event.preventDefault() 來阻止預設行為。這讓我對事件機制的理解更深入,也知道如何精確地控制使用者的互動行為。

  1. 使用 event.stopPropagation() 控制事件冒泡

https://ithelp.ithome.com.tw/upload/images/20240927/20169384FgREpku2aG.png

結果:

點擊 button 只會觸發 "Child clicked",而不會觸發 "Parent clicked"。

  1. 使用 event.preventDefault() 阻止預設行為

https://ithelp.ithome.com.tw/upload/images/20240927/201693848MMUv8qYp0.png

結果:

點擊連結後,彈出提示框,但不會跳轉到新的頁面。

今天我從事件傳遞中學到了如何運用捕獲與冒泡來精準控制事件的流向,這在複雜的頁面設計中非常有用。


上一篇
DAY 12: 鍵盤事件
下一篇
DAY 14: 動態綁定與移除事件
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言